import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useAppStore = defineStore('app', () => {
  // 状态
  const sidebarCollapsed = ref(false)
  const theme = ref('light') // 'light' | 'dark'
  const loading = ref(false)
  const notifications = ref([])
  const breadcrumbs = ref([])
  const pageTitle = ref('')
  const isMobile = ref(false)
  
  // 设备检测
  const checkDevice = () => {
    isMobile.value = window.innerWidth < 768
  }

  // 计算属性
  const isDark = computed(() => theme.value === 'dark')
  const hasNotifications = computed(() => notifications.value.length > 0)
  const unreadNotifications = computed(() => 
    notifications.value.filter(n => !n.read).length
  )

  // 侧边栏控制
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }

  const setSidebarCollapsed = (collapsed) => {
    sidebarCollapsed.value = collapsed
  }

  // 主题控制
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
    localStorage.setItem('theme', theme.value)
    updateThemeClass()
  }

  const setTheme = (newTheme) => {
    theme.value = newTheme
    localStorage.setItem('theme', newTheme)
    updateThemeClass()
  }

  const updateThemeClass = () => {
    const html = document.documentElement
    if (theme.value === 'dark') {
      html.classList.add('dark')
    } else {
      html.classList.remove('dark')
    }
  }

  // 加载状态控制
  const setLoading = (isLoading) => {
    loading.value = isLoading
  }

  const showLoading = () => {
    loading.value = true
  }

  const hideLoading = () => {
    loading.value = false
  }

  // 通知管理
  const addNotification = (notification) => {
    const id = Date.now().toString()
    notifications.value.unshift({
      id,
      read: false,
      createdAt: new Date().toISOString(),
      ...notification
    })
    
    // 自动移除通知（可选）
    if (notification.autoRemove !== false) {
      setTimeout(() => {
        removeNotification(id)
      }, notification.duration || 5000)
    }
  }

  const removeNotification = (id) => {
    const index = notifications.value.findIndex(n => n.id === id)
    if (index > -1) {
      notifications.value.splice(index, 1)
    }
  }

  const markNotificationAsRead = (id) => {
    const notification = notifications.value.find(n => n.id === id)
    if (notification) {
      notification.read = true
    }
  }

  const markAllNotificationsAsRead = () => {
    notifications.value.forEach(n => {
      n.read = true
    })
  }

  const clearNotifications = () => {
    notifications.value = []
  }

  // 面包屑导航
  const setBreadcrumbs = (crumbs) => {
    breadcrumbs.value = crumbs
  }

  const addBreadcrumb = (crumb) => {
    breadcrumbs.value.push(crumb)
  }

  const clearBreadcrumbs = () => {
    breadcrumbs.value = []
  }

  // 页面标题
  const setPageTitle = (title) => {
    pageTitle.value = title
    document.title = title ? `${title} - 新生报到服务平台` : '新生报到服务平台'
  }

  // 消息提示快捷方法
  const showSuccess = (message, options = {}) => {
    addNotification({
      type: 'success',
      title: '成功',
      message,
      ...options
    })
  }

  const showError = (message, options = {}) => {
    addNotification({
      type: 'error',
      title: '错误',
      message,
      autoRemove: false,
      ...options
    })
  }

  const showWarning = (message, options = {}) => {
    addNotification({
      type: 'warning',
      title: '警告',
      message,
      ...options
    })
  }

  const showInfo = (message, options = {}) => {
    addNotification({
      type: 'info',
      title: '提示',
      message,
      ...options
    })
  }

  // 确认对话框
  const showConfirm = (message, onConfirm, onCancel = null) => {
    if (window.confirm(message)) {
      if (onConfirm) onConfirm()
    } else {
      if (onCancel) onCancel()
    }
  }

  // 初始化应用状态
  const initApp = () => {
    // 恢复主题设置
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      theme.value = savedTheme
      updateThemeClass()
    }

    // 检测设备类型
    checkDevice()
    
    // 监听窗口大小变化
    window.addEventListener('resize', checkDevice)
    
    // 在移动设备上默认折叠侧边栏
    if (isMobile.value) {
      sidebarCollapsed.value = true
    }
  }

  // 清理应用状态
  const cleanup = () => {
    window.removeEventListener('resize', checkDevice)
  }

  return {
    // 状态
    sidebarCollapsed,
    theme,
    loading,
    notifications,
    breadcrumbs,
    pageTitle,
    isMobile,
    
    // 计算属性
    isDark,
    hasNotifications,
    unreadNotifications,
    
    // 方法
    toggleSidebar,
    setSidebarCollapsed,
    toggleTheme,
    setTheme,
    setLoading,
    showLoading,
    hideLoading,
    addNotification,
    removeNotification,
    markNotificationAsRead,
    markAllNotificationsAsRead,
    clearNotifications,
    setBreadcrumbs,
    addBreadcrumb,
    clearBreadcrumbs,
    setPageTitle,
    showSuccess,
    showError,
    showWarning,
    showInfo,
    showConfirm,
    initApp,
    cleanup,
    checkDevice
  }
})